<template>
  <div id="DoctorInformation">
    <div class="header-container">
      <h1>医生信息管理内容</h1>
      <el-input placeholder="请输入姓名" prefix-icon="el-icon-search" v-model="name" size="medium"
          class="header-input" />
      <el-select v-model="sex" placeholder="请选择性别" size="medium" class="header-select">
        <el-option label="男" value="1"></el-option>
        <el-option label="女" value="2"></el-option>
      </el-select>
      <el-select v-model="level_id" placeholder="请选择职位" size="medium" class="header-select">
        <el-option label="主任医师" value="1"></el-option>
        <el-option label="普通医师" value="2"></el-option>
        <el-option label="实习医师" value="3"></el-option>
      </el-select>
      <el-input placeholder="请输入医院" prefix-icon="el-icon-search" v-model="hospital" size="medium"
          class="header-input" />
             <el-button id="search" type="primary" icon="el-icon-search" @click="search()">搜索</el-button>
       <el-button type="success" class="add-button" @click="addFormvisible = true">新增医生</el-button>
    </div>

    <el-table :data="pm.list" border style="width: 100%">

      <el-table-column fixed prop="id" label="ID" width="150">
      </el-table-column>

      <el-table-column prop="name" label="姓名" width="120">
      </el-table-column>

      <el-table-column prop="age" label="年龄" width="120">
      </el-table-column>

      <el-table-column prop="sex" label="性别" width="120">
      </el-table-column>

      <el-table-column prop="level_name" label="职位" width="300">
      </el-table-column>

      <el-table-column prop="phone" label="手机号码" width="300">
      </el-table-column>

      <el-table-column prop="type_name" label="专业" width="120">
      </el-table-column>

      <el-table-column prop="hospital" label="医院" width="300">
      </el-table-column>

      <el-table-column fixed="right" label="操作" width="175">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" @click="updateDoctor(scope.row)">
          </el-button>
          <el-button type="danger" icon="el-icon-delete" @click="deleteDoctor(scope.row.id)">
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="编辑医生信息" :visible.sync="updateFormvisible" :modal="false" width="350px">
      <el-form :model="doctor" :label-width="'80px'">

        <el-form-item label="名称">
          <el-input v-model="doctor.name"></el-input>
        </el-form-item>

        <el-form-item label="年龄">
          <el-input v-model="doctor.age"></el-input>
        </el-form-item>

        <el-form-item label="性别">
          <el-select v-model="doctor.sex">
            <el-option label="男" value="1"></el-option>
            <el-option label="女" value="2"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="职位">
          <el-select v-model="doctor.level_id">
            <el-option label="主任医师" value="1"></el-option>
            <el-option label="普通医师" value="2"></el-option>
            <el-option label="实习医师" value="3"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="手机号码">
          <el-input v-model="doctor.phone"></el-input>
        </el-form-item>

        <el-form-item label="专业">
          <el-select v-model="doctor.type_id">
            <el-option label="肩部" value="1"></el-option>
            <el-option label="踝部" value="2"></el-option>
            <el-option label="膝部" value="3"></el-option>
            <el-option label="腰部" value="4"></el-option>
            <el-option label="头部" value="5"></el-option>
            <el-option label="肘部" value="6"></el-option>
            <el-option label="腿部" value="7"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="医院">
          <el-input v-model="doctor.hospital"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelUpdate()">取 消</el-button>
        <el-button type="primary" @click="submmitUpdate()">提 交</el-button>
      </div>
    </el-dialog>


    <el-dialog title="新增医生" :visible.sync="addFormvisible" :modal="false" width="350px">
      <el-form :model="doctor" :label-width="'80px'">

        <el-form-item label="名称">
          <el-input v-model="doctor.name"></el-input>
        </el-form-item>

        <el-form-item label="年龄">
          <el-input v-model="doctor.age"></el-input>
        </el-form-item>

        <el-form-item label="性别">
          <el-select v-model="doctor.sex">
            <el-option label="男" value="1"></el-option>
            <el-option label="女" value="2"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="职位">
          <el-select v-model="doctor.level_id">
            <el-option label="主任医师" value="1"></el-option>
            <el-option label="普通医师" value="2"></el-option>
            <el-option label="实习医师" value="3"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="手机号码">
          <el-input v-model="doctor.phone"></el-input>
        </el-form-item>

        <el-form-item label="专业">
          <el-select v-model="doctor.type_id">
            <el-option label="肩部" value="1"></el-option>
            <el-option label="踝部" value="2"></el-option>
            <el-option label="膝部" value="3"></el-option>
            <el-option label="腰部" value="4"></el-option>
            <el-option label="头部" value="5"></el-option>
            <el-option label="肘部" value="6"></el-option>
            <el-option label="腿部" value="7"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="医院">
          <el-input v-model="doctor.hospital"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelAdd()">取 消</el-button>
        <el-button type="primary" @click="submmitAdd()">提 交</el-button>
      </div>
    </el-dialog>





    <el-pagination background layout="total, sizes, prev, pager, next, jumper" :total="pm.totalRecords"
      :page-size="pm.pageSize" :current-page="pm.currentPageNum" :page-sizes="[5, 10, 20, 50]" @size-change="sizeChange"
      @current-change="pageChange" style="margin-top: 20px; text-align: center;">
    </el-pagination>

  </div>

</template>

<script>

import axios from 'axios'

export default {
  name: "DoctorInformation",
  data() {
    return {
      doctor: {
        id: null,
        name: "",
        age: "",
        sex: 1,
        level_id: 1,
        phone: "",
        type_id: 1,
        hospital: "",
        level_name: "",
        type_name: ""
      },
      name: "",
      sex: 0,
      level_id: 0,
      hospital: "",
      pm: {
        currentPageNum: 1,
        totalRecords: 0,
        pageSize: 5,
        totalPageNum: 0,
        startIndex: 0,
        prePageNum: 0,
        nextPageNum: 0,
        list: [],
        startPage: 0,
        endPage: 0
      },
      updateFormvisible: false,
      addFormvisible: false
    }
  },
  mounted() {
    this.getDoctorPage(1)
  },
  methods: {
    getDoctorPage(e) {
      axios.get("http://localhost:8080/getDoctorPage", { params: { num: e, size: this.pm.pageSize } }).then(res => {
        console.log(res.data);
        this.pm = res.data;
        this.pm.list.forEach(doctor => {
          doctor.sex = doctor.sex === 1 ? "男" : "女";
        });
      })
    },
    sizeChange(size) {
      this.pm.pageSize = size;
      this.getDoctorPage(1);
    },
    pageChange(num) {
      this.getDoctorPage(num);
    },
    updateDoctor(dc) {
      this.doctor = dc;
      this.updateFormvisible = true;
    },
    submmitUpdate() {
      this.doctor.sex = parseInt(this.doctor.sex);

      axios.put("http://localhost:8080/updateDoctor", this.doctor).then(res => {
        alert(res.data);
        this.getDoctorPage(this.pm.currentPageNum);
        this.updateFormvisible = false;
        this.resetDoctor;
      })
    },
    cancelUpdate() {
      this.updateFormvisible = false;
      this.resetDoctor;
    },
    submmitAdd() {
      this.doctor.sex = parseInt(this.doctor.sex);
      axios.post("http://localhost:8080/addDoctor", this.doctor).then(res => {
        alert(res.data);
        this.getDoctorPage(this.pm.totalPageNum);
        this.addFormvisible = false;
        this.resetDoctor;
      })
    },
    cancelAdd() {
      this.addFormvisible = false;
      this.resetDoctor;
    },
    search() {
      axios.get("http://localhost:8080/getDoctorByConditions", { params: { name: this.name, sex: this.sex, level_id: this.level_id, hospital: this.hospital } }).then(res => {
        this.pm.list = res.data;
        this.pm.list.forEach(doctor => {
          doctor.sex = doctor.sex === 1 ? "男" : "女";
        });
      })
    },
    resetSearch() {
      this.resetConditions();
      this.getDoctorPage(1);
    },
    resetConditions() {
      this.name = "";
      this.sex = 0;
      this.level_id = 0;
      this.hospital = "";
    },
    deleteDoctor(id) {
      if (confirm("确定删除？")) {
        axios.delete("http://localhost:8080/deleteDoctor", { params: { id } })
          .then(res => {
            alert(res.data);
            this.getDoctorPage(1);
          })
      }
    },
    resetDoctor() {
      this.doctor = {
        id: null,
        name: "",
        age: "",
        sex: 1,
        level_id: 1,
        phone: "",
        type_id: 1,
        hospital: "",
        level_name: "",
        type_name: ""
      };
    }

  }
}
</script>

<style>
#DoctorInformation {
  width: 100%;
  height: 100%;
}

.header-container {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.header-container h1 {
  font-size: 20px;
  margin-right: 24px;
  white-space: nowrap;
}

.header-input,
.header-select {
  width: 200px;
  height: 40px;
}

.header-btn {
  height: 40px;
  min-width: 90px;
  padding: 0 16px;
  font-size: 16px;
}
</style>